<template>
  <div class="daily-menu">
    <div class="daily-menu-item" :class="{on: type === 'recommend'}" @click="handleToRecommend">每日推荐</div>
    <div class="daily-menu-item" :class="{on: type === 'daily'}" @click="showThemes = !showThemes">主题日报</div>
    <ul v-show="showThemes">
      <li v-for="(item,index) in themes" :key="index">
        <a :class="{on: item.id === themeId && type === 'daily'}"
        @click="handleToTheme(item.id)">{{item.name}}</a>
      </li>
    </ul>
    <div class="daily-list">
      <Item></Item>
    </div>
    <daily-article></daily-article>
  </div>
</template>
<script>
import $ from './libs/util'
export default {
  data(){
    return{
      themes: [],
      showThemes: false,
      type: 'recommend',
      recommendList: [],
      dailyTime: $.getTodayTime(),
      isLoading: false,
      list: [],
      themeId: 0
    }
  },
  methods:{
    getThemes(){
      $.ajax.get('themes').then(res=>{
        this.themes = res.others;
      })
    },
    handleToRecommend(){
      this.type = 'recommend';
      this.recommendList = [];
      this.dailyTime = $.getTodayTime();
      this.getRecommendList();
    },
    handleToTheme(id){
      //改变菜单分类
      this.type = 'daily';
      //设置当前点击子类的主题日报 id
      this.themeId = id;
      //清空中间栏数据
      this.list = [];
      $.ajax.get('theme/' + id).then(res=>{
        //过滤掉类型为1的文章，该类型下的文章为空
        this.list = res.stories.filter(item => item.type !== 1);
      })
    },
    getRecommendList(){
      this.isLoading = true;
      const prevDay = $.prevDay(this.dailyTime + 24*60*60*1000);
      $.ajax.get('news/before/' + prevDay).then(res=>{
        this.recommendList.push(res);
        this.isLoading = false;
      })
    }
  },
  mounted(){
    this.getThemes();
    this.getRecommendList();
  }
}
</script>
<style scoped>
.daily-menu li{
  list-style: none;
}
.daily-menu ul li a{
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 5px 0;
  margin: 5px 0;
  cursor: pointer;
}
.daily-menu ul li a:hover, .daily-menu ul li a.on{
  color: #3399ff;
}
</style>


